<template>
  <div class="example-cus-bar">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>

    <data-v-panel>
      <template #title>
        自定义柱状图-类型1
        <a href="javascript:;" class="look-code" @click="lookCode('cus-bar')"
          >代码</a
        >
      </template>
      <template #body>
        <data-v-cus-bar color="#00EF7D" :series="series"></data-v-cus-bar>
        <data-v-cus-bar color="#0FA591" :series="series"></data-v-cus-bar>
        <data-v-cus-bar color="#D74021" :series="series"></data-v-cus-bar>
      </template>
    </data-v-panel>
    <data-v-panel>
      <template #title>自定义柱状图-类型2</template>
      <template #body>
        <data-v-cus-bar
          color="#0FA591"
          :series="series"
          type="2"
        ></data-v-cus-bar>
      </template>
    </data-v-panel>

     <data-v-panel>
      <template #title>自定义柱状图-类型3</template>
      <template #body>
        <data-v-cus-bar
          color="#00EF7D"
          :series="series"
          type="3"
        ></data-v-cus-bar>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template #title>自定义柱状图-类型4</template>
      <template #body>
        <data-v-cus-bar
          color="#00EF7D"
          :series="series"
          type="4"
        ></data-v-cus-bar>
        <data-v-cus-bar
          color="#0FA591"
          :series="series"
          type="4"
        ></data-v-cus-bar>
        <data-v-cus-bar
          color="#C600F7"
          :series="series"
          type="4"
        ></data-v-cus-bar>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template #title>自定义柱状图-类型5</template>
      <template #body>
        <data-v-cus-bar
          color="#00EF7D"
          :series="series"
          type="5"
        ></data-v-cus-bar>
        <data-v-cus-bar
          color="#0FA591"
          :series="series"
          type="5"
        ></data-v-cus-bar>
        <data-v-cus-bar
          color="#C600F7"
          :series="series"
          type="5"
        ></data-v-cus-bar>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template #title>自定义柱状图-类型6</template>
      <template #body>
        <data-v-cus-bar
          color="#00EF7D"
          :series="series"
          type="6"
        ></data-v-cus-bar>
        <data-v-cus-bar
          color="#0FA591"
          :series="series"
          type="6"
        ></data-v-cus-bar>
        <data-v-cus-bar
          color="#C600F7"
          :series="series"
          type="6"
        ></data-v-cus-bar>
      </template>
    </data-v-panel>

    <go-home></go-home>
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";
export default {
  name: "example-cus-bar",
  data() {
    return {
      thisCode: "",
      isShowCode: false,
      series: [
        {
          name: "technology",
          value: 80
        },
        {
          name: "hardware",
          value: 60
        },
        {
          name: "taxes",
          value: 80
        },
        {
          name: "others",
          value: 95
        },
        {
          name: "software",
          value: 75
        }
      ]
    };
  },
  components: {
    CodeContainer
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then(res => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    }
  }
};
</script>


<style lang="less">
.example-cus-bar {
  min-height: 100vh;
  padding: 10px;
  background: #000 url(./example1-img/gridBg.png);
  color: #fff;
}
</style>
